<template>
  <h2>toRefs的使用</h2>
  <h4>name:{{name}}</h4>
  <h4>age:{{age}}</h4>
  <h4>name:{{name2}}</h4>
  <h4>age:{{age2}}</h4>
</template>

<script>
import {defineComponent,reactive,toRefs} from 'vue'
function useFeatureX() {
  const state = reactive({
      name2:'xiaoyu2',
      age2:192
    })
    return {
      ...toRefs(state)
    }
}
export default defineComponent({
  name: 'App',
  setup(){
    const state = reactive({
      name:'xiaoyu',
      age:19
    })
    const {name,age} = toRefs(state)
    // console.log(state2);
    setInterval(()=>{
      // state.name+='='
      // state2.name.value +='='
      name.value +='='
      console.log('====');
    },1000)
    const {name2,age2} =useFeatureX()
    return{
      // state
      // ...state
      // ...state2
      name,
      age,
      name2,
      age2
    }
  }
})
</script>

<style lang="less" scoped>

</style>
